<template>
  <el-container>
    <el-header>
      <h4>
        <img src="https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png" alt="">
        <span>物业管理系统</span>
      </h4>
      <div class="demo-type">
        <el-dropdown>
          <span class="el-dropdown-link">
            <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" alt="">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="clear()">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto">
        <NavLeft />
      </el-aside>
      <el-main>
        <div class="out"  >
          <i class="el-icon-s-unfold" @click="APP_UPDATA_BOOL" v-if="data"></i>
          <i class="el-icon-s-fold" @click="APP_UPDATA_BOOL" v-else></i>
        </div>

        <div class="box">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import NavLeft from "@/components/NavLeft.vue";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    NavLeft,
  },
  methods: {
    ...mapMutations(["APP_UPDATA_BOOL"]),
    clear() {
      sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
  computed: {
    ...mapState({
      data: (state) => state.pm.bool,
    }),
  },
  created () {
    //判断是否有store这个本地存储的数据
    if (sessionStorage.getItem("store") ) {
      // 如果有  那么把vuex的数据替换  把当前的state  和上次刷新存储的state合并起来
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        sessionStorage.removeItem("store")
    } 
 
    //在页面监听绑定一个beforeunload事件（页面刷新事件）
    // 当页面刷新的时候使用本地存储存一个store的数据  把vuex的数据全部取出来 转成字符串存起来
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
};
</script>

<style scoped lang="scss">
// .out {
// }
.el-icon-s-unfold {
  font-size: 35px;
}
.el-icon-s-fold {
  font-size: 35px;
}
.el-header {
  background-color: #fff;
  line-height: 60px;
  font-size: 30px;
  color: black;
  position: relative;

  h4{
    display: flex;
    align-items: center;
    img{
      width: 40px;
      height: 40px;
    }
  }
}
.demo-type {
  position: absolute;
  height: 60px;
  top: 0;
  right: 30px;
}
.el-main {
  background-color: #f2f2f2;
}
.el-container {
  height: 100%;
}
.el-menu-vertical-demo {
  height: 100%;
}
.el-dropdown-link{
    position: relative;
  img{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    right: 20px;
  }
}
// box设置100%高度首页有滚动条不要设置
// .box {
//   height: 100%;
// }
</style>